<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab-content{
            clear:both;
            width:600px;
            height:100px;
            border: 1px solid #000;
        }
        .tab-content p{
            padding:10px;
        }
        #app ul{
            list-style: none;
            padding:0;
            margin:0;
        }
        #app li {
            width:150px;
            height:40px;
            text-align:center;
            line-height:40px;
            float:left;
            margin-right:1px ;
            cursor:pointer;
            color: #fff;
        }
        .bg{
            background-color:deeppink;
        }
        .active{
            background-color:palevioletred
        }
        #app{
            width:700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li class="bg" :class="{active:index === nowindex}" v-for="(item,index) in myitems" @click="toggleView(index)">{{item.username}}</li>
        </ul>
        <div class="tab-content">
            <component :is="view"></component>
        </div>
    </div>
    <script src="/JS文件/vue.js"></script>
    <script>
        var com0={
            template:`<p style="background-color:pink;">是一套用于构建用户见面的渐进式框架。</p>`
        }
        var com1={
            template:`<p style="background-color:yellow;">是一种直译式脚本语言，是一种动态类型，弱类型,基于原型的语言。</p>`
        }
        var com2={
            template:`<p style="background-color:oldlace;">超文本标记语言(HyperText Markup Language,HTML)。</p>`
        }
        var com3={
            template:`<p style="background-color:orange;">是一门面向对象编程语言</p>`
        }
        var vm = new Vue({
            el:"#app",
            data:{
                view:'com0',
                nowindex:0,
                myitems:[{
                    username:'Vue 课程',
                    text:""
                },
                {
                    username:'javaScript 课程',
                    text:""
                },
                {
                    username:'HTML 课程',
                    text:""
                },
                {
                    username:'java 课程',
                    text:""
                }
            ],
            },
            components:{
                com0,
                com1,
                com2,
                com3
            },
            methods:{
                toggleView(index){
                    this.view='com'+index
                    this.nowindex=index
                }
            },
        })
    </script>
</body>
</html>